<template>
    <div>
        <el-table
            :data="tableOptions.data"
            fit
            >
            <el-table-column
                prop="name"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="dataSource"
                label="数据来源">
            </el-table-column>
            <el-table-column
                prop="dataFormat"
                label="数据格式">
            </el-table-column>
            <el-table-column
                prop="dataSize"
                label="数据量级">
            </el-table-column>
            <el-table-column
                prop="rowCount"
                label="数据行数">
            </el-table-column>
            <el-table-column
                prop="spatialRegion"
                label="空间范围">
                <template slot-scope="scope">
                    {{scope.row.spatialRegion[0]}}
                    <template v-if="scope.row.spatialRegion.length>1">
                        <el-popover trigger="hover" placement="top" style="display:inline-block;">
                            <template v-for="(item,index) in scope.row.spatialRegion">
                                <template v-if="index!=0">
                                    {{item}}
                                    <template v-if="index%10==0">
                                        <br :key="index">
                                    </template>
                                </template>
                            </template>
                            <div slot="reference" class="name-wrapper">
                                ...
                            </div>
                        </el-popover>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                prop="spatialResolution"
                label="空间分辨率">
            </el-table-column>
            <el-table-column
                prop="timeRange"
                label="时间范围">
                <template slot-scope="scope">
                    {{scope.row.timeRange[0]}}
                    <template v-if="scope.row.timeRange.length>1">
                        <el-popover trigger="hover" placement="top" style="display:inline-block;">
                            <template v-for="(item,index) in scope.row.timeRange">
                                <template v-if="index!=0">
                                    {{item}}
                                    <template v-if="index%10==0">
                                        <br :key="index">
                                    </template>
                                </template>
                            </template>
                            <div slot="reference" class="name-wrapper">
                                ...
                            </div>
                        </el-popover>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                prop="timeResolution"
                label="时间分辨率">
            </el-table-column>
             <el-table-column
                prop="isPlat"
                label="是否集成在平台中">
            </el-table-column>
            <el-table-column
                prop="sampleData"
                label="数据样例">
                <template slot-scope="scope">
                    <template v-if="scope.row.sampleData">
                        <el-button
                            size="mini"
                            @click="openExample(scope.$index, scope.row)">查看示例数据</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <template v-if="tableOptions.pagination.total>0">
            <el-pagination
                style="text-align:center;"
                background
                layout="total, prev, pager, next"
                :current-page.sync="tableOptions.pagination.curPage"
                @current-change="curPageChange"
                :total="tableOptions.pagination.total">
                </el-pagination>
        </template>

        <!-- 弹窗 -->
        <DataTableDialog :dialogOption="dialogOption"/>
    </div>
</template>

<script>
import DataTableDialog from './dataTable/DataTableDialog.vue'
export default {
    components:{
        DataTableDialog,
    },
    props:[
        'tableOptions'
    ],
    data() {
        return {
            dialogOption:{
                open: false,
                params: [],
                data:[],
            }
        }
    },
    methods:{
        openExample(index, row){
            console.log(index)
            console.log(row)
            this.dialogOption.open = true
            this.dialogOption.params = row
            this.dialogOption.data = JSON.parse(row.sampleData)
        },
        curPageChange(curPageNum){
            this.$emit('pageChange', curPageNum)
        }
    }
}
</script>